<template>
  <div class="audit-changeProductAndPrice-view">

    <el-form :inline="true">
      <el-row>
        <el-col :span="12">
          <el-form-item label="代理商名称">
            {{ datas.agentName }}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="统一社会信用代码">
            {{ datas.creditCode }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="代理商级别">
            {{ getLabel('agent_level',datas.agentLevel) }}
          </el-form-item>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="产品名称">
            {{ getProductName(agentProduct) }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="代理地区">
            <area-list-view :areas="agentProduct.region" />
          </el-form-item>
        </el-col>
      </el-row>

      <!--            <el-row>-->
      <!--                <el-col :span="12">-->
      <!--                    <el-form-item label="代理属性">-->
      <!--                        {{getLabel(type == 'agent' ? 'agent' : 'agent_person' , agentProduct.agentAttribute) }}-->
      <!--                    </el-form-item>-->
      <!--                </el-col>-->

      <!--                <el-col :span="12">-->
      <!--                    <el-form-item label="代理地区">-->
      <!--                        <area-list-view :areas="agentProduct.region" />-->
      <!--                    </el-form-item>-->
      <!--                </el-col>-->
      <!--            </el-row>-->

      <el-row>
        <el-col :span="12">
          <el-form-item label="可营销终端">
            {{ getLabel('app_mode',agentProduct.terminalType) }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="交易价">
            <div style="display: flex;align-items: center">
              <span>¥{{ agentProduct.tradePrice }}</span>
            </div>

          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="代理期限至">
            {{ dateFormat('yyyy-mm-dd',agentProduct.agentEndTime) }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="最低销量">
            <span v-if="agentProduct.minSale">{{ agentProduct.minSale }}{{ getLabel('sell_unit',agentProduct.sellUnit) }}/{{ getLabel('sell_num_unit',agentProduct.minSaleUnit) }}</span>
            <span v-else>未设置</span>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="销量保证金">
            <span v-if="agentProduct.minSalePromise">¥{{ agentProduct.minSalePromise }}</span>
            <span v-else>未设置</span>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="负责营销职员">
            {{ agentProduct.headName }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>

        <el-col :span="12">
          <el-form-item label="其他约定">
            {{ agentProduct.remark }}
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="12">
          <el-form-item label="创建人">
            {{ agentProduct.creatorName }}
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="创建时间">
            {{ dateFormat('yyyy-mm-dd',agentProduct.createdAt) }}
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>

  </div>
</template>

<script>
// 变更产品与价格审批
import {defineAsyncComponent, defineComponent, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'ChangeProductAndPrice',
  components: {
    contractDetail: defineAsyncComponent(() =>
      import('../../../../commonView/contract/contractDetail.vue')
    ),
  },
  props: {
    props: {
      detailData: {
        type: Object,
        default: {},
      },
    },
  },
  setup() {
    var data = reactive({
      datas: {},
      detailDrawer: null,
    })

    const contractClick = () => {
      data.detailDrawer.open()
    }

    return {
      ...toRefs(data),

      contractClick,
    }
  },
})
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";
.audit-changeProductAndPrice-view {
  .mainColor {
    color: $active-color;
  }
  .drawerTitle {
    font-size: 18px;
  }
}
</style>
